<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <script src="jquery.serialize-object.js"></script>
    <script>
        $(function () {
            $("#search").click(function () {
                //发送ajax请求
                $.getJSON("/untitled2_war_exploded/search.do",null,function (data) {
                    $.each(data,function (i,n) {
                        $("table").append("<tr id='"+this.id+"'>\n" +
                            "                <td>"+this.id+"</td>\n" +
                            "                <td>"+this.name+"</td>\n" +
                            "                <td>"+this.sex+"</td>\n" +
                            "                <td>"+this.age+"</td>\n" +
                            "                <td>"+this.rank+"</td>\n" +
                            "                <td>"+this.bumeng+"</td>\n" +
                            "<td><a href='javascript:void(0)' id='delete'>删除</a></td>"+
                            "            </tr>");
                    });
                });
            });

            //删除
            $("table").on("click","#delete",function () {
                let id=$(this).parent().prev().prev().prev().prev().prev().prev().text();
                let tanc=confirm("确定是否要删除此信息？");
                if (tanc==true){
                        $.getJSON("/untitled2_war_exploded/shanchu.do","name="+id,function (data) {
                            alert("删除成功！");
                        });
                        $("tr[id='"+id+"']").remove();
                }
            });

            //增加
            $("#add_submit").click(function () {
                let msg=$("#form").serializeJSON();
                alert(msg);
                $.ajax({
                    "url":"/untitled2_war_exploded/add.do",
                    "data":"obj="+msg,
                    "type":"post",
                    "dataType":"json",
                    "success":function (data) {
                        $("table").append("<tr id='="+data.id+"'>\n"+
                            "<td>"+data.id+"</td>\n"+
                            "<td>"+data.name+"</td>\n"+
                            "<td>"+data.sex+"</td>\n"+
                            "<td>"+data.age+"</td>\n"+
                            "<td>"+data.rank+"</td>\n"+
                            "<td>"+data.bumeng+"</td>\n"+
                            "<td><a href='java:script:void(0)' onclick='del("+data.id+")'>删除</a></td>"+
                            "</tr>");
                        alert("新增成功");
                    },
                    "error":function () {
                        alert("新增失败");
                    }
                });
            });

        });
    </script>



</head>
<body>
<table border="1" align="center">
    <tr>
        <th>编号</th>
        <th>名字</th>
        <th>性别</th>
        <th>年龄</th>
        <th>等级</th>
        <th>部门</th>
        <th>操作</th>
    </tr>
</table>
<input type="button" value="查询" id="search"/>
<div id="add_div">
    <form method="post" action="#" id="form">
        id:<input type="text" name="id"/><br/>
        name:<input type="text" name="name"><br>
        Sex:<input type="text" name="sex"><br>
        Age:<input type="text" name="age"><br>
        Rank:<input type="text" name="rank"><br>
        Bumeng:<input type="text" name="bumeng"><br>
        <input type="button" value="提交" id="add_submit">
    </form>
</div>
</body>
</html>